<template>
  <div class="content">
    <div class="filter-wrap">
      <div class="box-flex">
        <div class="flex">
          <zx-form-group :title="$t('CURRENCY')">
            <zx-select :place="$t('CURRENCY_PLACE')" v-model="coinType" class="boxShadow" @change='changeValue'>
              <zx-option value=''>{{'ALL'|t}}</zx-option>
              <zx-option :value="item.coin_no" v-for='(item,key) of allCoinTypeList' :key='key'>{{item.coin_core}}</zx-option>
            </zx-select>
          </zx-form-group>
        </div>
        <div class="flex">
          <zx-form-group :title="$t('TYPE')">
            <zx-select :place="$t('TYPE_PALCE')" v-model="values" class="boxShadow" @change='changeValue'>
              <zx-option value="0">{{'BUY'|t}}</zx-option>
              <zx-option value="1">{{'SELL'|t}}</zx-option>
              <zx-option value="2">{{'ALL'|t}}</zx-option>
            </zx-select>
          </zx-form-group>
        </div>
      </div>
    </div>

    <ul class="manage-list" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
      <li class="manage-item boxShadow" v-for="(item,key) of dataList" :key="key">
        <div class="item-top border-b">
          <div class="top-left">
            <img :src="item.buyUserPhoto?item.buyUserPhoto:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1522128922672&di=f8c5881b28ec1164a3f983fc98883a06&imgtype=0&src=http%3A%2F%2Fimg5q.duitang.com%2Fuploads%2Fitem%2F201410%2F04%2F20141004212538_SXjWV.jpeg'"
              alt="" class="user-pic" v-if="item.type=='1'">
            <img :src="item.sellUserPhoto?item.sellUserPhoto:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1522128922672&di=f8c5881b28ec1164a3f983fc98883a06&imgtype=0&src=http%3A%2F%2Fimg5q.duitang.com%2Fuploads%2Fitem%2F201410%2F04%2F20141004212538_SXjWV.jpeg'"
              alt="" v-else class="user-pic">
            <span class="item-text">{{item.type==1?item.buyUserName:item.sellUserName}}</span>
          </div>
          <div class="item-right c-success">{{item.state|orderType(item)}}</div>
        </div>
        <div class="item-desc">
          <p class="item-desc-text">
            <span>{{'ORDER_NUMBER'|t}}：</span>
            <span>{{item.id}}</span>
          </p>
          <p class="item-desc-text">
            <span>{{'TRANSACTION_TYPE'|t}}：</span>
            <span class="c-success" v-if="item.type=='1'">{{'SELL'|t}}{{item.coinCore}}</span>
            <span class="c-red" v-else>{{'BUY'|t}}{{item.coinCore}}</span>
          </p>
          <p class="item-desc-text">
            <span>{{'TRANSACTION_AMOUNT'|t}}：</span>
            <span>{{item.sumPrice}} CNY</span>
          </p>
          <p class="item-desc-text">
            <span>{{'TRADING_HOURS'|t}}：</span>
            <span>{{item.dateFormatDate}}</span>
          </p>
        </div>
        <div class="item-button">
          <zx-button type='primary' @click='comfirmOrder(item)' v-show="item.type=='0'&&item.state=='3'">{{'CONFIRMPAYING'|t}}</zx-button>
          <zx-button type='primary' @click='comfirmOrder(item)' v-show="item.type=='1'&&item.state=='4'">{{'CONFIRMCOLLECTING'|t}}</zx-button>
          <zx-button @click="$router.push({path:'/c2c/detail',query:{dealNo:item.id,type:item.type}})">{{'DETAIL'|t}}</zx-button>
          <zx-button class="c-gray" v-if="item.state == '3'" @click="cancelConfirm(item)">{{'CANCEL'|t}}</zx-button>
          <zx-button class="c-gray" v-if="item.state == '4'" @click="$router.push({path:'/manage/dispute',query:{type:item.type,sellUserNo:item.sellUserNo,buyUserNo:item.buyUserNo,dealNo:item.id}})">纠纷申请</zx-button>
        </div>
      </li>
    </ul>
    <zx-no-data v-model='showNoDataBool'></zx-no-data>
    <zx-pass-mask v-model='showBool' @submit="getPass"></zx-pass-mask>
  </div>
</template>
<script>
  import { Form, Func, Auth } from '@/providers';
  import { C2c, Coins } from '@/services';
  import passMask from '@/components/pass-mask';
  export default {
    data() {
      return {
        showBool: false,
        values: '2',
        coinType: '',
        allCoinTypeList: [],
        dataList: [],
        cancelItem: {},
        showNoDataBool: false,
        ConfirmReceiveItem: {},
        loading: false,
        loadingBool: true,
        ConfirmPayItem: {},
        pageSize: 1,
        stepOrder: '' //  cancel 取消订单  ,ConfirmReceive  确认收款 ,ConfirmPay 确认付款
      };
    },
    methods: {
      changeValue() {
      },
      async loadMore() {
        if (this.loading) { return false; };
        this.loading = true;
        try {
          let res = await C2c.GetSpotDealDetailByUserNo({
            userNo: Auth.getItem('userId'),
            token: Auth.getItem('token'),
            coinNo: this.coinType,
            state: '7',  // 状态，0：匹配中，1：已完成，2：撤销，3：等待买方付款，4：等待卖方确认，6：未付款回滚订单 7 全部
            type: this.values, // 类型（0：买，1：卖）
            pageSize: this.pageSize,
            lineSize: 10
          });
          if (!Form.checkResToken(res, true)) return false;
          if (res.data.dtoList.length >= 10) {
            this.loading = false;
          }
          this.pageSize += 1;
          this.dataList = [...this.dataList, ...res.data.dtoList];
          this.showNoDataBool = res.data.dtoSize == 0 ? true : false;
        } catch (error) {
          console.log(error);
        }
      },
      getPass(val) {
        switch (this.stepOrder) {
          case 'cancel':
            // 取消订单
            this.cancelOrderFn(this.cancelItem, val);
            break;
          case 'ConfirmReceive':
            this.ConfirmReceive(this.ConfirmReceiveItem, val);
            // 确认收款
            break;
          case 'ConfirmPay':
            // 确认付款
            this.ConfirmPay(this.ConfirmPayItem, val);
            break;
        }
      },
      // 确认收款或付款
      async comfirmOrder(item) {
        if (item.type == 1) {
          // 卖
          this.stepOrder = 'ConfirmReceive';
          this.showBool = true;
          this.ConfirmReceiveItem = item;
        } else {
          // 买
          this.stepOrder = 'ConfirmPay';
          this.showBool = true;
          this.ConfirmPayItem = item;
        }
      },
      // 确认收款
      async ConfirmReceive(item, pass) {
        try {
          let res = await C2c.ConfirmReceive({
            userNo: Auth.getItem('userId'),
            token: Auth.getItem('token'),
            dealPassword: Func.PasswordEncrypt(pass),
            dealNo: item.id
          });
          if (!Form.checkResToken(res)) return false;
          Form.Totas(res.desc, () => {
            // this.getData();
            console.log(item);
            item.state = 3;
          });
        } catch (error) {
          console.log(error);
        }
      },
      // 确认付款
      async ConfirmPay(item, pass) {
        try {
          let res = await C2c.ConfirmPay({
            userNo: Auth.getItem('userId'),
            token: Auth.getItem('token'),
            dealPassword: Func.PasswordEncrypt(pass),
            dealNo: item.id
          });
          if (!Form.checkResToken(res)) return false;
          Form.Totas(res.desc, () => {
            // this.getData();
            console.log(item);
            item.state = 1;
          });
        } catch (error) {
          console.log(error);
        }
      },
      cancelConfirm(item) {
        this.$dialog.Confirm({
          title: this.$t('WARMTIPS'),
          msg: this.$t('CANCEL_ORDER'),
          onOk: () => {
            this.stepOrder = 'cancel';
            this.cancelItem = item;
            this.showBool = true;
          },
          cancel: () => {
            console.log('cancel');
          }
        });
      },
      // 取消订单
      async cancelOrderFn(item, pass) {
        try {
          let res = await C2c.CancelDealDetail({
            userNo: Auth.getItem('userId'),
            token: Auth.getItem('token'),
            dealNo: item.id,
            dealPassword: Func.PasswordEncrypt(pass),
            userNoType: item.type
          });
          if (!Form.checkResToken(res)) return false;
          Form.Totas(res.desc, () => {
            item.state = 2;
            // this.getData();
          });
        } catch (error) {
          console.log(error);
        }
      },
      //  获取所有币种
      async GetAllCoinType() {
        try {
          let res = await Coins.GetAllCoinType({
            token: Auth.getItem('token')
          });
          this.allCoinTypeList = res.data;
        } catch (error) {
          console.log(error);
        }
      },
      async getData() {
        try {
          let res = await C2c.GetSpotDealDetailByUserNo({
            userNo: Auth.getItem('userId'),
            token: Auth.getItem('token'),
            coinNo: this.coinType,
            state: '7',  // 状态，0：匹配中，1：已完成，2：撤销，3：等待买方付款，4：等待卖方确认，6：未付款回滚订单 7 全部
            type: this.values, // 类型（0：买，1：卖）
            pageSize: this.pageSize,
            lineSize: 10
          });
          if (!Form.checkResToken(res)) return false;
          this.dataList = res.data.dtoList;
        } catch (error) {
          console.log(error);
        }
      }
    },
    watch: {
      coinType() {
        this.pageSize = 1;
        this.loading = false;
        this.dataList = [];
        this.loadMore();
      },
      values(val) {
        console.log(222);
        this.$router.push({ path: '/manage/order', query: { type: val } });
        this.dataList = [];
        this.pageSize = 1;
        this.loading = false;
        this.loadMore();
      }
    },
    components: {
      'zx-pass-mask': passMask
    },
    created() {
      if (this.$route.query.type) {
        this.values = this.$route.query.type;
      } else {
        this.values = '2';
      }
      this.GetAllCoinType();
      this.loadMore();
    }
  };
</script>
<style lang="scss" scoped>
  @import "../../assets/sass/manage.scss";
</style>